<script>
  import addtable from '@/mixins/addtable'
  import AjaxStore from '@/utils/store/proxyAjax'
  import store from './store.js'

  export default {
    name: 'configCode',
    mixins: [addtable, store],
    data() {
      return {
        labelWidth: '110px',
        tableOptWidth: '80',
        selectedList: [],
				dialogType: '',
        idKey: 'configId',
        delIdKey: 'configId',
        delListIdKey: 'configIds',

        addUrl: '/v1/sys/configcode/add',
        updateUrl: '/v1/sys/configcode/update',
        delUrl: '/v1/sys/configcode/delete',
        delListUrl: '/v1/sys/configcode/deleteList',
        syncUrl: '/v1/sys/configcode/sync',
        url: '/v1/sys/configcode/findById',
        store: new AjaxStore({
          url: '/v1/sys/configcode/query'
        }),
        columns: [
           { prop: "codeType", label: "代码类别", sortable: true, 'min-width': "120", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "typeName", label: "类别名称", sortable: true, 'min-width': "120", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "tableName", label: "表名", sortable: true, 'min-width': "125", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "valueField", label: "代码值字段", sortable: true, 'min-width': "116", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "nameField", label: "代码名称字段", sortable: true, 'min-width': "130", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "filterWhere", label: "过滤条件", sortable: true, 'min-width': "132", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "orderNo", label: "排序号", sortable: true, width: "87", 'show-overflow-tooltip': true, 'header-align': 'center' },
           { prop: "remark", label: "备注", sortable: true, 'min-width': "160", 'show-overflow-tooltip': true, 'header-align': 'center' }
		    ],
        searchFields: [
          { label: '代码类别', prop: 'codeType', placeholder: '输入代码类别', anchor: 9 },
          { label: '类别名称', prop: 'typeName', placeholder: '输入类别名称', anchor: 12 }
		    ],
        searchModel: {
          "codeType": '',
          "typeName": ''
		    },

        searchBtnList: this.searchBtnList,
        toolPanelBtnList: this.toolPanelBtnList,
        tableRowBtnList: this.tableRowBtnList,

        formPanel: {
          add: {
            model: {
           		"codeType": '',
           		"typeName": '',
           		"tableName": '',
           		"valueField": '',
           		"nameField": '',
           		"filterWhere": '',
           		"orderNo": '',
           		"remark": ''            },
            fields: [
        		{ label: '代码类别', prop: 'codeType', placeholder: '输入代码类别', anchor: 24},
        		{ label: '类别名称', prop: 'typeName', placeholder: '输入类别名称', anchor: 24},
        		{ label: '表名', prop: 'tableName', placeholder: '输入表名', anchor: 24},
        		{ label: '代码值字段', prop: 'valueField', placeholder: '输入代码值字段', anchor: 24},
        		{ label: '代码名称字段', prop: 'nameField', placeholder: '输入代码名称字段', anchor: 24},
        		{ label: '过滤条件', prop: 'filterWhere', placeholder: '输入过滤条件', anchor: 24},
        		{ label: '排序号', prop: 'orderNo', placeholder: '输入排序号', anchor: 24},
        		{ label: '备注', prop: 'remark', type: 'textarea', placeholder: '输入备注', anchor: 24}            ],
            rules: {
               "codeType": [{ required: true, message: '请输入代码类别', trigger: 'blur' }],
               "typeName": [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
               "tableName": [{ required: true, message: '请输入表名', trigger: 'blur' }],
               "nameField": [{ required: true, message: '请输入代码名称字段', trigger: 'blur' }],
            },
            title: '新增配置代码',
            type: 'ADD',
            ref: 'addForm',
            submitBtnList: this.addBtns
          },
          edit: {
            model: {
             "projectId": '',
             "configId": '',
          	 "codeType": '',
          	 "typeName": '',
          	 "tableName": '',
          	 "valueField": '',
          	 "nameField": '',
          	 "filterWhere": '',
          	 "orderNo": '',
          	 "remark": ''            },
            fields: [
              { label: '代码类别', prop: 'codeType', placeholder: '输入代码类别', anchor: 24},
              { label: '类别名称', prop: 'typeName', placeholder: '输入类别名称', anchor: 24},
              { label: '表名', prop: 'tableName', placeholder: '输入表名', anchor: 24},
              { label: '代码值字段', prop: 'valueField', placeholder: '输入代码值字段', anchor: 24},
              { label: '代码名称字段', prop: 'nameField', placeholder: '输入代码名称字段', anchor: 24},
              { label: '过滤条件', prop: 'filterWhere', placeholder: '输入过滤条件', anchor: 24},
              { label: '排序号', prop: 'orderNo', placeholder: '输入排序号', anchor: 24},
              { label: '备注', prop: 'remark', type: 'textarea', placeholder: '输入备注', anchor: 24}
            ],
            rules: {
         	   "typeName": [{ required: true, message: '请输入类别名称', trigger: 'blur' }],
         	   "tableName": [{ required: true, message: '请输入表名', trigger: 'blur' }],
         	   "nameField": [{ required: true, message: '请输入代码名称字段', trigger: 'blur' }],
            },
            title: '编辑配置代码',
            type: 'EDIT',
            ref: 'editForm',
            submitBtnList: this.editBtns
          },
          look: {
            model: {
          	    "codeType": '',
          	    "typeName": '',
          	    "tableName": '',
          	    "valueField": '',
          	    "nameField": '',
          	    "filterWhere": '',
          	    "orderNo": '',
          	    "remark": ''            },
            fields: [
          		{ label: '代码类别', prop: 'codeType', placeholder: '', anchor: 24, disabled: true },
          		{ label: '类别名称', prop: 'typeName', placeholder: '', anchor: 24, disabled: true },
          		{ label: '表名', prop: 'tableName', placeholder: '', anchor: 24, disabled: true },
          		{ label: '代码值字段', prop: 'valueField', placeholder: '', anchor: 24, disabled: true },
          		{ label: '代码名称字段', prop: 'nameField', placeholder: '', anchor: 24, disabled: true },
          		{ label: '过滤条件', prop: 'filterWhere', placeholder: '', anchor: 24, disabled: true },
          		{ label: '排序号', prop: 'orderNo', placeholder: '', anchor: 24, disabled: true },
          		{ label: '备注', prop: 'remark', type: 'textarea', placeholder: '', anchor: 24, disabled: true }            ],
            rules: {
            },
            title: '查看配置代码',
            type: 'LOOK',
            ref: 'lookForm',
            submitBtnList: this.lookBtns
          }
        }
      }
    },
    methods: {
      handleSync() {
        this.syncData().then((res) => {
          if (res.success) {
            this.$message({
              type: 'success',
              message: res.message
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    beforeCreate(){

      // 根据页面路由找出有权限访问的 url 数组
      const urlArr = (this.$route.meta && this.$route.meta.children || []).map(item => item.url)

      // 根据权限 url 数组过滤出能够使用的 按钮数组

      this.searchBtnList = [
          { label: '查询', methods: 'handleSearch', url: '/v1/sys/configcode/findById', icon: 'el-icon-search', type: 'primary', disabled: false },
          { label: '重置', methods: 'handleSearchReset', url: '', icon: 'el-icon-refresh', type: 'warning', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

      this.toolPanelBtnList = [
        { label: '新增', methods: 'handleAdd', url: '/v1/sys/configcode/add', icon: 'el-icon-circle-plus-outline', type: 'primary', disabled: false },
        { label: '删除', methods: 'handleDelGroup', url: '/v1/sys/configcode/deleteList', icon: 'el-icon-delete', type: 'danger', disabled: false },
        { label: '同步', methods: 'handleSync', url: '/v1/sys/configcode/sync', svgIcon: 'sync', type: 'sync', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

      this.tableRowBtnList = [
        { label: '编辑', methods: 'handleEdit', url: '/v1/sys/configcode/update', icon: 'el-icon-edit-outline', type: 'primary', key: 'edit', align: 'top-start', disabled: false },
        { label: '删除', methods: 'handleDelete', url: '/v1/sys/configcode/delete', icon: 'el-icon-delete', type: 'danger', key: 'delete', align: 'top-start', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

      this.addBtns = [
        { label: '保存并新增', methods: 'handleSubmitAndAdd', url: '/v1/sys/configcode/add', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '保存', methods: 'handleAddSubmit', url: '/v1/sys/configcode/add', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

      this.editBtns = [
        { label: '保存', methods: 'handleEditSubmit', url: '/v1/sys/configcode/update', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: false },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

      this.lookBtns = [
        { label: '保存', methods: '', url: '', icon: 'el-icon-circle-check-outline', type: 'primary', disabled: true },
        { label: '取消', methods: 'handleCancel', url: '', icon: 'el-icon-circle-close-outline', disabled: false }
      ].filter(item => item.url && urlArr.includes(item.url) || !item.url)

    }
  }
</script>

<style lang="scss">
  .configCode{
    .searchPanel{
      padding-bottom: 0;
      .search-btn-box{
        bottom: 0;
      }
    }
  }
</style>
